<template>
  <div class="FirstMangeLeft">
    <s-title text="设备统计" :btnshow="false" />
    <!-- <div id="FirstMangeLeftChart"></div> -->
    <div class="num">
      <span>设备总数：{{numl}}</span>
    </div>
    <div class="secondnum">
      <span>按类型统计设备数量</span>
    </div>
    <div class="thridType">
      <div class="LX" v-for="item in arr" :key="item.name">
        <span>{{item.name+":"+item.value}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import sTitle from "../../common/sTitle";
import axios from "axios";
export default {
  name: "FirstMangeLeft",
  components: {
    sTitle
  },
  data() {
    return {
      comps: [],
      arr: [],
      numl:null,
    };
  },
  mounted() {
    //axios.get(this.$serverIp + "getQsfx").then((res) => {
    axios.get(this.$sbIp).then(res => {
      var k = {};
      this.numl = res.data.data.length;
      for (var i = 0; i < res.data.data.length; i++) {
        if (k[res.data.data[i].deviceType]) {
          k[res.data.data[i].deviceType]++;
        } else {
          k[res.data.data[i].deviceType] = 1;
        }
      }
      //对象转换成数组
      for (let key in k) {
        this.arr.push({ name: key, value: k[key] });
      }

      debugger;
      //res = this.ls;
      //        var echartData = { data1: [], data2: [],data3:[] };
      //       for(var i=0;i<res.data.length;i++){
      // echartData.data1.push(res.data[i].ny);
      // echartData.data2.push(res.data[i].yps);
      // echartData.data3.push(res.data[i].rps);
      //       }
      // var echartData = { xData: [], yData: [] };
      // echartData.yData[0] = [];
      // echartData.yData[1] = [];
      // for (let i = 0; i < res.data.length; i++) {
      //   echartData.xData.push(res.data[i].ny);
      //   echartData.yData[0].push(res.data[i].yps);
      //   echartData.yData[1].push(res.data[i].rps);
      // }
      
    });
  },
  methods: {
   
  }
};
</script>
<style scoped>
#FirstMangeLeftChart {
  width: 100%;
  height: 27vh;
  margin-top: 10px;
}
.FirstMangeLeft {
  width: 100%;
  height: 24%;
}
.num {
  width: 80%;
  height: 50px;
  line-height: 54px;
  margin-left: 50px;
}
.secondnum {
  width: 80%;
  height: 35px;
  line-height: 43px;
  margin-left: 50px;
}
.num span {
  color: #c9e3f9;
  font-size: 18px;
  font-style: oblique;
  font-family: "HYLXJT";
}
.secondnum span {
  color: #c9e3f9;
  font-size: 18px;
  font-style: oblique;
  font-family: "HYLXJT";
}
.thridType {
  width: 100%;
  height: 100px;
  display: flex;
}
.LX {
  width: 80px;
  margin-left: 17px;
  height: 100px;
  line-height: 68px;
}
.LX span {
  color: #c9e3f9;
  font-size: 14px;
  font-style: oblique;
  font-family: "HYLXJT";
}
</style>
 